<template>
  <div class="search">
    <van-nav-bar fixed title="商品列表" left-arrow @click-left="$router.go(-1)" />

    <van-search
      readonly
      shape="round"
      background="#ffffff"
      v-model="key"
      show-action
      @click="$router.push('/search')"
    >
     
    </van-search>
    
    <!--<van-icon class="tool" name="apps-o" @click="$router.push('/category')" />-->
   
    <!-- 排序选项按钮 -->
    <!-- <div class="sort-btns">
      <div class="sort-item">综合</div>
      <div class="sort-item">销量</div>
      <div class="sort-item">价格 </div>
    </div> -->

    <div v-if="targets.length!=0">
    <GoodsItem v-for="item in targets" :key="item" :item="item"></GoodsItem>
    </div>
   
  <van-empty v-if="targets.length===0" description="没有找到相关商品" />
    
  </div>
</template>

<script setup>
import GoodsItem from '@/components/GoodsItem.vue';
import { ref,computed,watchEffect } from 'vue';
import { useRoute } from 'vue-router';
import { productByCategoryService,allProductListService,itemsByProductService,categoryListService } from '@/api/category';
//const key = ref("")
// 获得动态路由中携带的参数
const route = useRoute();
const key = ref(route.params.key);
const targets = ref([{
    id: 0,
    productId: "k-23",
    categoryId: "string",
    name: "string",
    img:'',
    description: "string",
},
]); // 创建一个用来存储筛选后结果的响应式对象
console.log(key.value)
//根据key进行搜索
//以下是由前端完成的丐版搜索函数，逻辑，将所有name中含有key的商品筛选出来

//首先获取所有商品列表
const searchProducts = ref([
  {
    id: 1,
    productId: "k-23",
    categoryId: "string",
    name: "string",
    description: "string",
  },
  
]);

//搜索函数
const searchProductsFunction=()=>{
  searchShowProducts.value = searchProducts.value;
  for(let i = 0;i<searchProducts.value.length;i++){
    let str = searchProducts.value[i].description;
    // 使用正则表达式匹配需要截取的内容
    const urlRegex = /src="([^"]+)"/;
    const urlMatch = str.match(urlRegex);
    let url = urlMatch ? urlMatch[1] : '';
    //无图片则显示默认
    if(url==''){
      url = 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg'
    }
 
    // 截取 ">" 符号后的句子部分
    const indexGreaterThan = str.indexOf('>');
    const sentence = indexGreaterThan !== -1 ? (str.substring(indexGreaterThan + 1)) : '';
  
    searchShowProducts.value[i].description = sentence;
    searchShowProducts.value[i].img = url;
  }
  //转换后再筛选一次
  watchEffect(() => {
  targets.value = searchShowProducts.value.filter(item => item.name.includes(key.value));
  });
  console.log(targets.value)
  console.log('转换完成')
}

//转换从后端接收到的Pro列表
const searchShowProducts = ref([
  {
    id: 0,
    productId: "k-23",
    categoryId: "string",
    name: "string",
    img:'',
    description: "string",
  },
])

//页面加载时便调用的方法
//获得所有Pro,并且在拿到所有Pro后分出推荐和新品
const allProductList=async()=>{
  //后端完成后启用，当前使用死数据
  let result =await allProductListService();
  searchProducts.value = result.data.data;
  console.log('products get')
  searchProductsFunction();
}

allProductList();

</script>

<style lang="less" scoped>
.search {
  padding-top: 46px;
  ::v-deep .van-icon-arrow-left {
    color: #333;
  }
  .tool {
    float: left;
    position: absolute;
    top: 40px;
    right: 20px;
    font-size: 24px;
    height: 40px;
    line-height: 40px;
  }

  .sort-btns {
    display: flex;
    height: 36px;
    line-height: 36px;
    .sort-item {
      text-align: center;
      flex: 1;
      font-size: 16px;
    }
  }
}

.goods-list {
  background-color: #f6f6f6;
}
.searchListBody{
  display: grid;
  place-items: center;
  height: 100vh; /* 父容器高度，可根据需要调整 */
}
.van-nav-bar {
  background-color: #FFDF75;
}
</style>